import React from 'react';
import styles from './App.module.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Header, Footer } from './components';
import { HomePage, LoginPage, RegisterPage, DetailPage } from "./pages";

function App() {
    return (
        <div className={styles.App}>
            {/*路由导航与原生浏览器操作行为一致*/}
            <BrowserRouter>
                <Header/>
                {/*路径的切换以页面为单位，不要页面堆叠*/}
                <Switch>
                    {/*路由的路径解析原理与原生浏览器一致，可以自动识别url路径*/}
                    <Route exact path="/" component={ HomePage } />
                    <Route path="/login" component={ LoginPage } />
                    <Route path="/register" component={ RegisterPage } />
                    <Route path="/detail/:id" component={ DetailPage } />
                    <Route render={() => <h2>404 not found 页面去火星了</h2>} />
                </Switch>
                <Footer/>
            </BrowserRouter>
        </div>
    );
}

export default App;
